<template>
  <div class="main-div-con">
    <div style="width: 100%;height:5% ">
    </div>
    <canvas id="myCanvas" class="index-con" style="height: 80%;width: 95% ;" @click="onEvent($event)"
    />
    <el-button @click="beginConnect()">开始连接</el-button>
    <div>{{ message }}</div>

  </div>
</template>
<script type="text/ecmascript-6">
import {drownRoute, drownRect, drownImage, drownImage2, drownCircular} from "../../function/canvas";

export default {
  name: "canvasComplement",
  mounted() {
    this.initCanvas();
    this.initWebSocket();

  },
  created() {
    window.vueData = this;
    //初始化棋盘

  },
  data() {
    return {
      context: null,
      board: [[]],
      boardWidth: 12,
      boardHeight: 15,
      pieceSize: 30,
      rootPos: {x: 0, y: 0},
      canvas: null,
      socket: null,
      roomInfo: {
        'roomId': 1
      },
      message: '',
      endMessage: ''
    }
  },
  methods: {
    intiBoard() {
      for (let i = 0; i < this.boardHeight; i++) {
        for (let j = 0; j < this.boardWidth; j++) {
          this.board[i] = [];
          this.board[i][j] = 0;
        }
      }
    },
    drownBoard() {
      console.log(this.boardWidth * this.pieceSize)
      //底色
      drownRect(this.context, {
        x: this.rootPos.x,
        y: this.rootPos.y
      }, {
        x: this.rootPos.x + (this.boardWidth - 1) * this.pieceSize,
        y: this.rootPos.y + (this.boardHeight - 1) * this.pieceSize
      }, 1, 'orange', true)

      for (let i = 0; i < this.boardHeight; i++) {
        drownRoute(this.context, {
          x: this.rootPos.x,
          y: this.rootPos.y + this.pieceSize * i
        }, [{
          x: this.rootPos.x + this.pieceSize * (this.boardWidth - 1),
          y: this.rootPos.y + this.pieceSize * i
        }], 'black', 4)
      }
      //竖线

      for (let i = 0; i < this.boardWidth; i++) {
        drownRoute(this.context, {
          x: this.rootPos.x + i * this.pieceSize,
          y: this.rootPos.y
        }, [{
          x: this.rootPos.x + i * this.pieceSize,
          y: this.rootPos.y + this.pieceSize * (this.boardHeight - 1)
        }], 'black', 4)
      }

    },
    /**
     * 点击事件
     * @param e
     */
    onEvent(e) {
      let x = e.clientX - this.canvas.getBoundingClientRect().left;
      let y = e.clientY - this.canvas.getBoundingClientRect().top;
      this.move(x, y)

    },

    /**
     * 落子事件
     */
    move(x, y) {
      // 只处理棋盘上的点击事件
      if (x < this.rootPos.x || x > this.rootPos.x + this.pieceSize * this.boardWidth || y < this.rootPos.y || y > this.rootPos.y + this.boardHeight * this.pieceSize) {
        return;
      }
      let x1 = x - this.rootPos.x;
      let y1 = y - this.rootPos.y;
      let x2 = x1 / this.pieceSize;
      let y2 = y1 / this.pieceSize;
      let x3 = Math.round(x2);
      let y3 = Math.round(y2);
      let message = {
        'command': 'move',
        data: JSON.stringify(
          {
            'roomId': this.roomInfo.roomId,
            'moveX': x3,
            'moveY': y3
          }
        )
      }
      //发消息
      this.send(JSON.stringify(message))

    },

    moveBoard(x3, y3, color) {
      let x4 = x3 * this.pieceSize + this.rootPos.x;
      let y4 = y3 * this.pieceSize + this.rootPos.y;
      drownCircular(this.context, x4, y4, this.pieceSize / 2, true, color, 1);
    },
    initCanvas() {
      const canvas = document.getElementById('myCanvas')
      this.canvas = canvas;
      let rect = canvas.getBoundingClientRect()

      canvas.width = rect.width;
      canvas.height = rect.height;
      this.context = canvas.getContext('2d')
      this.rootPos.x = rect.left;
      this.rootPos.y = rect.top;
      this.pieceSize = canvas.width / this.boardWidth;

      this.drownBoard()
    },


    // web socket function
    initWebSocket() {

      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.socket = new WebSocket('ws://1.116.73.156:5000/api/socketMessage')
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    //准备加入房间
    beginConnect() {
      let message = '{\"command\":\"connect\"}'
      this.send(message)
    },
    open() {
      console.log('ws is open')
    },
    error() {
    },
    getMessage(msg) {
      let message = JSON.parse(msg.data);
      this.message = msg.data;
      if (message.command == 'connect_success') {
        let data = message.data;
        this.roomInfo = JSON.parse(data);
      } else if (message.command == 'move') {
        let data = message.data;
        let moveData = JSON.parse(data);
        let x = moveData.moveX;
        let y = moveData.moveY;
        this.moveBoard(x, y, 'white');
        if (moveData.isEnd == true) {
          if (moveData.isSuccess == true) {
            this.endMessage = '你赢了'
          } else {
            this.endMessage = '你输了'
          }
        }
      } else if (message.command == 'move_ack') {
        let data = message.data;
        let moveData = JSON.parse(data);
        let x = moveData.moveX;
        let y = moveData.moveY;
        this.moveBoard(x, y, 'black');
        if (moveData.isEnd == true) {
          if (moveData.isSuccess == true) {
            this.endMessage = '你赢了'
          } else {
            this.endMessage = '你输了'
          }
        }

      }
    },
    send(message) {
      this.socket.send(message)
    }

  }
}
</script>
<style>
.main-div-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
</style>
